<template>
	<u-navbar backIconColor="#fff" title="代理申请" title-color="#fff" :is-back="true" :background="{}" class="bg"
		:borderBottom="false"></u-navbar>
	<image style="height: 440rpx;width: 100%;" :src="inits.banner.first_image"></image>
	<view class="content">
		<view class="form">
			<view class="mt-50 mb_50 font-34" style="font-weight: 500;">填写申请信息</view>
			<u-input v-model="parmars.inviter" placeholder="邀请人（平台）请核对"></u-input>
			<u-input v-model="parmars.recode_name" placeholder="姓名"></u-input>
			<u-input v-model="parmars.recode_phone" type="number" placeholder="手机号"></u-input>

			<view class="flex flex-ai-c font-22 mb_30 mt-10">
				<radio :checked="radioShow" color="#FF0000" @click="changeRadio" style="transform:scale(0.7)"></radio>
				<view style="color: #999999;">
					我已阅读并同意<text style="color: #333333;" @click="inits.mask = true">《代理商申请协议》</text>
				</view>
			</view>

			<view>
				<view>
					<text class="font-28 font-bold pb-10" style="border-bottom: 4rpx solid #009943;">代理权益</text>
				</view>
				<view class="mt-40" style="overflow: auto;">
					<rich-text user-select :selectable="true" :nodes="inits.agent_right"></rich-text>
				</view>

				<!-- <view class="mt-50">
					<view class="font-bold font-26 mb_20 flex flex-ai-c">
						<image src="/static/image/privilege.svg" />特权内容
					</view>
					<view class="font-22">直推用户下单得现金奖励30%，间推最高返佣15%。</view>
				</view>
				<view class="mt-50">
					<view class="font-bold font-26 mb_20 flex flex-ai-c">
						<image src="/static/image/range.svg" />适用范围
					</view>
					<view class="font-22">全平台产品所产生的订单销售金额。</view>
				</view> -->
			</view>

			<view class="footer">
				<view class="flex flex-ai-c flex-jc-sb">
					<view>
						<text class="font-28">支付金额</text>
						<text style="color: #FE2600;">
							<text class="font-22"> ¥ </text>
							<text class="font-48 font-bold">{{parmars.recode_money}}</text>
						</text>
					</view>
					<view class="btn" @click="applyBecomeAgent">提交申请</view>
				</view>
			</view>
		</view>
	</view>
	<u-modal v-model="inits.mask" mask-close-able :show-confirm-button="false" :show-title="false">
		<scroll-view scroll-y style="padding: 20rpx;height: 700rpx;" class="font-24">
			<rich-text user-select :selectable="true" :nodes="inits.agent_agreement"></rich-text>
		</scroll-view>
	</u-modal>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import user from '@/api/user.js'
	import common from '@/api/common.js';
	let radioShow = ref(false)
	const parmars = reactive({
		inviter: '',
		recode_name: '',
		recode_phone: '',
		recode_money: 0
	})
	const inits = reactive({
		agent_agreement: '',
		agent_right: '',
		mask: false,
		banner: []
	})
	const getBanner = async () => {
		const res = await common.getBanner({ flag: 5 })
		if (res.code !== 200 || !res.data.length) return
		inits.banner = res.data[0]
	}
	const getAgentCost = async () => {
		const res = await user.getAgentCost()
		if (res.code !== 200) return
		parmars.recode_money = res.data.agent_money
		inits.agent_agreement = res.data.agent_agreement
		inits.agent_right = res.data.agent_right
	}
	const applyBecomeAgent = async () => {
		if(!radioShow.value) return showMsg('请阅读并勾选协议')
		if(!parmars.inviter || !parmars.recode_name || !parmars.recode_phone) return showMsg('请填写完整信息')
		const res = await user.applyBecomeAgent(parmars)
		if (res.code !== 200) return
		uni.requestOrderPayment({
			...res.data.payRes,
			success() {
				showMsg('支付成功')
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/me/agent/index'
					})
				},2000)
			},
			fail(err2) {
				if (err2.errMsg === 'requestPayment:fail cancel') {
					showMsg('您已取消支付')
				} else {
					showMsg('支付失败')
				}
			}
		})
		
	}
	const showMsg = (msg) => {
		uni.showToast({
			title: msg,
			icon: 'none'
		})
	}
	const changeRadio = () => {
		radioShow.value = !radioShow.value
	}
	
	onLoad(() => {
		getAgentCost()
		getBanner()
	})
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 44rpx;
		position: absolute;
	}
	.content {
		margin: 0 16rpx;
		position: relative;
		border: 1px solid #fff;
		top: -30rpx;
		background: #fff;
		border-radius: 7rpx;
		z-index: 2;
		.form {
			padding: 0 30rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 26rpx;
		width: 100%;
		left: 0;
		padding: 0 28rpx;

		.btn {
			width: 242rpx;
			height: 96rpx;
			background: #009943;
			border-radius: 12rpx;
			line-height: 96rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
		}
	}

	:deep(.u-input) {
		background: #F7F7F7;
		height: 78rpx;
		margin-bottom: 30rpx;
	}

	:deep(input) {
		padding-left: 28rpx !important;
	}

	image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
</style>